<!doctype html>
<html lang="en">
  <head>
    <%= htmlWebpackPlugin.options.tags.head %>
    <!-- 页面css -->
    <link rel="stylesheet" href="./css/articleDetailHtml.css" />
    <link rel="stylesheet" href="./css/playerDetail.css" />
  </head>

  <body>
    <div class="page">
      <header class="page-header">
        <div class="page-header-nav">
          <div class="header-nav-left">
            <span class="glyphicon glyphicon-menu-left nav-back-btn" onclick="router.back()"></span>
          </div>
          <div class="header-nav-title width-0 display-none">
            <div class="text-align-center text-ellipsis">
              <img class="display-inline-block width-height-20 margin-right-10" src="./images/ball_park.png" alt="" srcset="" />
              <span>Haaland</span>
            </div>
          </div>
        </div>
      </header>
      <!-- 内容主体 -->
      <main class="page-main">
        <div class="flex-column text-white player-info">
          <div class="flex-column align-center">
            <img class="player-logo" src="./images/ball_park.png" alt="" srcset="" />
            <h3 class="font-size-normal margin-0 margin-top-10 margin-bottom-10">Haaland</h3>
            <p class="font-size-min">
              <span>Age 24</span>
              <span>/Manchester City</span>
              <span>/No.9</span>
              <span>/Attacker</span>
            </p>
          </div>
        </div>

        <!-- 切换tab-nav -->
        <div class="full-height flex-column">
          <div class="align-center bg-regular">
            <div class="tab-nav tab-nav-around list-type-tab">
              <div class="tab-nav-item active" data-role="Info"><span class="tab-nav-name">Info</span></div>
              <div class="tab-nav-item" data-role="News"><span class="tab-nav-name">News</span></div>
            </div>
          </div>

          <div class="flex-1 height-0">
            <!-- Info -->
            <div id="Info" class="full-height margin-left-10 margin-right-10">
              <div class="flex-column full-height">
                <div class="overflow-y-auto">
                  <!-- Basic information -->
                  <div class="card-white margin-top-10">
                    <div class="flex-column">
                      <div class="justify-between align-center margin-top-10 margin-bottom-15">
                        <h4 class="margin-0 font-size-small font-weight-bold title_bg_icon_min">Basic information</h4>
                        <a class="text-color-secondary font-size-min" href="playerInfo.html">ALL ></a>
                      </div>
                      <div class="article-detail-html">
                        Manchester United Football Club, founded in 1878, is one of the most successful and prestigious football clubs in England. The club is headquartered in Manchester, England.
                        Achievements: Manchester United Football Club is one of the most successful clubs in the Premier League, having won multiple Premier League championships. They are still in the
                        English Football Cup
                      </div>

                      <div class="split-line margin-top-15 margin-bottom-15"></div>

                      <div class="flex-column">
                        <div class="flex flex-gap-10 margin-bottom-20">
                          <div class="flex-1 flex-column">
                            <span class="margin-bottom-2">Erling Haaland</span>
                            <span class="text-color-secondary font-size-min">Full name</span>
                          </div>
                          <div class="flex-1 flex-column">
                            <span class="margin-bottom-2">Norway</span>
                            <span class="text-color-secondary font-size-min">Nationality</span>
                          </div>
                        </div>
                        <div class="flex flex-gap-10 margin-bottom-10">
                          <div class="flex-1 flex-column">
                            <span class="margin-bottom-2">2000/07/21</span>
                            <span class="text-color-secondary font-size-min">Birthday</span>
                          </div>
                          <div class="flex-1 flex-column">
                            <span class="margin-bottom-2">195cm</span>
                            <span class="text-color-secondary font-size-min">Height</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- Transfer record -->
                  <div class="card-white margin-top-10">
                    <div class="flex-column margin-bottom-10">
                      <div class="justify-between align-center margin-top-10 margin-bottom-15">
                        <h4 class="margin-0 font-size-small font-weight-bold title_bg_icon_min">Transfer record</h4>
                      </div>
                    </div>
                    <div class="flex-column font-size-min">
                      <div class="flex-column margin-bottom-15">
                        <time class="text-color-secondary margin-bottom-5" datetime="08/21/2021">08/21/2021</time>
                        <div class="align-center">
                          <div class="flex-1">
                            <div class="align-center">
                              <a href="teamDetail.html">
                                <img class="width-height-15 margin-right-5" src="./images/ball_park.png" alt="" srcset="" />
                              </a>
                              <a href="teamDetail.html" class="flex-1 width-0 text-ellipsis">Borussia Dortmund</a>
                            </div>
                          </div>
                          <img class="width-height-10 margin-right-5" src="./images/teamDetail/left_icon.png" alt="" srcset="" />
                          <div class="flex-1">
                            <div class="align-center">
                              <a href="teamDetail.html">
                                <img class="width-height-15 margin-right-5" src="./images/ball_park.png" alt="" srcset="" />
                              </a>
                              <a href="teamDetail.html" class="flex-1 width-0 text-ellipsis">Manchester City</a>
                            </div>
                          </div>
                          <div>15M EUR</div>
                        </div>
                      </div>

                      <div class="flex-column margin-bottom-15">
                        <time class="text-color-secondary margin-bottom-5" datetime="08/21/2021">08/21/2021</time>
                        <div class="align-center">
                          <div class="flex-1">
                            <div class="align-center">
                              <a href="teamDetail.html">
                                <img class="width-height-15 margin-right-5" src="./images/ball_park.png" alt="" srcset="" />
                              </a>
                              <a href="teamDetail.html" class="flex-1 width-0 text-ellipsis">Borussia Dortmund</a>
                            </div>
                          </div>
                          <img class="width-height-10 margin-right-5" src="./images/teamDetail/right_icon.png" alt="" srcset="" />
                          <div class="flex-1">
                            <div class="align-center">
                              <a href="teamDetail.html">
                                <img class="width-height-15 margin-right-5" src="./images/ball_park.png" alt="" srcset="" />
                              </a>
                              <a href="teamDetail.html" class="flex-1 width-0 text-ellipsis">Manchester City</a>
                            </div>
                          </div>
                          <div>15M EUR</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- News -->
            <div id="News" class="full-height hide-none">
              <div class="flex-column full-height">
                <div class="overflow-y-auto">
                  <div class="padding-10 flex-column flex-gap-10"><%= htmlWebpackPlugin.options.tags.news %></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>

    <%= htmlWebpackPlugin.options.tags.foot %>
    <script src="./js/playerDetail.js"></script>
  </body>
</html>
